<div class="card">
    <div class="header">
        <div class="img-box">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path fill="none" d="M0 0h24v24H0z"></path>
                <path d="M20.083 15.2l1.202.721a.5.5 0 0 1 0 .858l-8.77 5.262a1 1 0 0 1-1.03 0l-8.77-5.262a.5.5 0 0 1 0-.858l1.202-.721L12 20.05l8.083-4.85zm0-4.7l1.202.721a.5.5 0 0 1 0 .858L12 17.65l-9.285-5.571a.5.5 0 0 1 0-.858l1.202-.721L12 15.35l8.083-4.85zm-7.569-9.191l8.771 5.262a.5.5 0 0 1 0 .858L12 13 2.715 7.429a.5.5 0 0 1 0-.858l8.77-5.262a1 1 0 0 1 1.03 0zM12 3.332L5.887 7 12 10.668 18.113 7 12 3.332z" fill="rgba(66,193,110,1)"></path>
            </svg>
        </div>
        <span class="title">Features
    </span></div>

    <div class="content">
        <p>
            Lorem ipsum dolor sit tali amet, consectus uy
            adipiscing it amet it...
        </p>

        <a class="btn-link">Read More...</a>
    </div>
</div>
<style>
/* From Uiverse.io by joe-watson-sbf - Tags: summary, card, hover, card template, cardhover , card animation, card hover */
.card {
  width: 190px;
  height: 120px;
  transition: all .5s;
  box-shadow: 15px 15px 30px rgba(25, 25, 25, 0.11),
             -15px -15px 30px rgba(60, 60, 60, 0.082);
  text-align: center;
  overflow: hidden;
}

.card:hover {
  height: 260px;
  background: linear-gradient(360deg, #edededc5 60%, hsla(0, 0%, 13%, 1) 70%);
}

.card .header {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #212121;
  margin-bottom: 16px;
}

.card .header .img-box {
  width: 50px;
}

.card .header .title {
  font-size: 1em;
  letter-spacing: .1em;
  font-weight: 900;
  text-transform: uppercase;
  padding: 4px 0 14px 0;
  transition: all .5s;
  color: #edededc5;
}

.card:hover .header {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
}

.card:hover .card .header .title {
  padding: 0;
}

.card .content {
  display: block;
  text-align: left;
  color: #212121;
  margin: 0 18px;
}

.card .content p {
  transition: all .5s;
  font-size: .8em;
  margin-bottom: 8px;
}

.card .content a {
  color: #1d8122;
  cursor: pointer;
  transition: all .5s;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.card .content .btn-link:hover {
  border-bottom: 1px solid #1d8122;
}
</style>
